<template>
    <view class="opportunityManage">
        <uni-nav-bar fixed left-icon="left" title="商机管理" @clickLeft="backHandle" class="unibarS">
        </uni-nav-bar>
        <u-sticky offset-top="0">
			<dropdown-screen
				ref="dropdownScreen"
				:barFontSize="32"
				:barTextColor="'rgba(12, 16, 25, 1)'"
				:activeColor="'rgba(77, 172, 177, 1)'"
				@tabClick="tabClick"
				@confirm="confirm"
				@reset="reset"
				:listArr="listArr">
				<template v-slot:content>
					<view class="searchContent" v-show="searchType == 0">
						<u--form labelPosition="top" ref="uForm" labelWidth="70">
							<u-form-item label="排序方式" ref="item1">
								<radio-group @change="radioChangeSortKeyValues" class="radio-group-box">
									<label>
										<radio value="desc" :checked="tempSearchObj.sortKeyValues === 'desc'" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>倒序排序</text>
									</label>
									<label>
										<radio value="asc" :checked="tempSearchObj.sortKeyValues === 'asc'" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>正序排序</text>
									</label>
								</radio-group>
							</u-form-item>
							<u-form-item label="排序属性" ref="item1">
								<radio-group @change="radioChangeSortKey" class="radio-group-box">
									<label v-for="(item, index) in sortPropsList" :key="index">
										<radio :value="item.value" :checked="tempSearchObj.sortKey === item.value" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>{{ item.name }}</text>
									</label>
								</radio-group>
							</u-form-item>
						</u--form>
					</view>
					<view class="searchContent" v-show="searchType == 1">
						<u--form labelPosition="top" ref="uForm" labelWidth="100">
							<u-form-item label="商机来源" ref="item1">
								<radio-group @change="radioChange($event, 'opportunitySource')" class="radio-group-box">
									<label v-for="(item, index) in bus_source" :key="index">
										<radio :value="item.dictValue" :checked="tempSearchObj.opportunitySource === item.dictValue" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>{{ item.name }}</text>
									</label>
								</radio-group>
							</u-form-item>
							<u-form-item label="手机号码" ref="item1">
								<u--input v-model="tempSearchObj.phoneNumber" border="true" placeholder="请输入手机号" :custom-style="{ border: '1px solid rgba(103, 117, 133, 0.4)' }"></u--input>
							</u-form-item>
						</u--form>
					</view>
				</template>
			</dropdown-screen>
		</u-sticky>
        <!-- <uni-search-bar v-model="params.keyWords" class="uni-mt-10" bgColor="#FFFFFF" radius="5" placeholder="搜索" clearButton="auto"
            cancelButton="none" @confirm="searchHandle()" @clear="searchHandle()" /> -->
        <view v-if="list.length" class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="item-top">
                    <view class="item-top-left">
                        <view class="name">{{ item.customerName }}</view>
                        <!-- <view class="rate">预计销售金额：¥10,000.00</view> -->
                        <!-- <view class="time">预计签单日期：2024-04-01</view> -->
                    </view>
                    <view class="item-top-right">
                        <view>
                            <u-avatar :src="item.avatar"></u-avatar>
                            <view class="salesman">{{ item.businessManagerName }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else />
    </view>
</template>

<script>
import dropdownScreen from '@/components/dropdown-screen/dropdown-screen'
export default {
    components: {
		dropdownScreen
	},
    data() {
        return {
            params: {
				sortKey: 'create_time',
				sortKeyValues: 'desc',
                opportunitySource: null,
				phoneNumber: null,
				pageNum: 1,
				pageSize: 20
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
            listArr: [
				{
					label: '排序',
					iconPath: '/static/svg/icon-paixu.svg'
				},
				{
					label: '筛选',
					iconPath: '/static/svg/icon-shaixuan.svg'
				}
			],
			// 排序0  筛选1
			searchType: 0,
			sortPropsList: [
				{ name: '创建时间', value: 'create_time' }
			],
			info: {
                insert: false,
                selected: []
            },
			tempSearchObj: {
				sortKey: 'create_time',
				sortKeyValues: 'desc',
				opportunitySource: null,
				phoneNumber: null,
			}
        }
    },
    onLoad() {
        this.bus_source = JSON.parse(uni.getStorageSync('bus_source'))
		this.getData()
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.get('/app/opportunity/myDataList', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
					// if (this.refresh) {
					// 	uni.stopPullDownRefresh()
					// }
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
        goDetails(item) {
            uni.navigateTo({
                url: '/pages/opportunity/opportunityDetails?id=' + item.id
            });
        },
        backHandle() {
            uni.navigateBack()
        },
        		// 排序方式
		radioChangeSortKeyValues(e) {
			console.log(e)
			this.tempSearchObj.sortKeyValues = e.detail.value
		},
		// 排序属性
		radioChangeSortKey(e) {
			console.log(e)
			this.tempSearchObj.sortKey = e.detail.value
		},
		radioChange(e, props) {
			console.log(e)
			console.log(props)
			this.tempSearchObj[props] = e.detail.value
		},
		// 点击了 切换了 搜索标签
		tabClick(item) {
			console.log('点击了')
			console.log(item)
			this.searchType = item.index
		},
		reset() {
			this.tempSearchObj = {
				sortKey: 'create_time',
				sortKeyValues: 'desc',
				opportunitySource: null,
				phoneNumber: null,
			}
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.searchHandle()
		},
		confirm() {
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.searchHandle()
		},
    }
}
</script>

<style lang="scss" scoped>
/deep/.uni-navbar__header-btns-right {
    width: 64px !important;
}

.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-top: 20rpx;

    .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-top-left {
            flex: 1;
            margin-right: 20rpx;
            width: 0;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-bottom: 32rpx;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rate,
            .time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 26rpx;
            }
        }

        .item-top-right {
            width: 150rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            text-align: right;
            > view {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
            }
            .salesman {
                margin-top: 8rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                width: 100%;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.searchContent {
	padding: 0 32rpx;
	/deep/.u-radio-group--row {
		display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
		> view {
			padding: 8rpx 0;
			margin-right: 60rpx;
		}
	}
}
.search-item-box {
    /deep/.u-form-item__body__right {
        border: 2rpx solid rgba(103, 117, 133, 0.4);
        padding: 16rpx 16rpx;
        border-radius: 8rpx;
    }
}
.checkbox-group-box {
	display: flex;
	flex-wrap: wrap;
	/deep/.uni-label-pointer {
		display: flex;
    	align-items: center;
		margin-right: 32rpx;
	}
}
/deep/.uni-label-pointer {
	display: flex;
	align-items: center;
}
.radio-group-box {
	display: flex;
	flex-wrap: wrap;
	/deep/.uni-label-pointer {
		display: flex;
    	align-items: center;
		margin-right: 32rpx;
		line-height: 28px;
	}
}
/deep/.uni-radio-input {
	width: 18px;
	height: 18px;

}

</style>